<template>
  <div class="comment-container">
    <transition-group name="comment" tag="ul" class="comment-list">
      <li
        v-for="(comment, index) in visibleComments"
        :key="comment.commentId + '-' + index"
        class="comment-item"
        :style="{
          height: `${itemHeight}px`,
          lineHeight: `${itemHeight}px`,
          top: `${index * itemHeight}px`,
        }"
      >
        <div class="comment-content">
          {{ comment.content }}
        </div>
      </li>
    </transition-group>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch, onUnmounted } from 'vue'

const props = defineProps({
  comments: {
    type: Array,
    required: true,
    default: () => [],
    validator: (value) => Array.isArray(value),
  },
  duration: { type: Number, default: 5 }, // 滚动周期（秒）
  scrollDistance: { type: Number, default: 40 }, // 新增滚动距离参数
})

const scrollWrapper = ref(null)
const currentIndex = ref(0)
const itemHeight = 40 // 单个评论高度

const reversedComments = computed(() => [...props.comments].reverse())

// 当前显示的评论
const visibleComments = computed(() => {
  const baseIndex = currentIndex.value % reversedComments.value.length
  return [
    reversedComments.value[baseIndex],
    reversedComments.value[(baseIndex + 1) % reversedComments.value.length],
  ].filter(Boolean)
})

// 启动滚动动画
const startScroll = () => {
  if (reversedComments.value.length < 2) return
  currentIndex.value++
}

// 自动滚动控制
let scrollInterval
const startAutoScroll = () => {
  scrollInterval = setInterval(startScroll, props.duration * 1000)
}

onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  clearInterval(scrollInterval)
})
</script>

<style scoped>
.comment-container {
  background-color: transparent;
  position: relative;
  width: 200px;
  height: 84px;
  /* 两行高度 */
  margin: 8px;
  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-list {
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.comment-item {
  position: absolute;
  width: 100%;
  height: auto;
  transition: all 0.6s ease;
  border-radius: 10px;
}

.comment-item:first-child {
  margin-bottom: 5px;
}

.comment-item:last-child {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* 入场动画 */
.comment-enter-active {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-enter-from {
  opacity: 0;
  transform: translateY(100%);
}

.comment-enter-to {
  opacity: 1;
  transform: translateY(0);
}

/* 离场动画 */
.comment-leave-active {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
}

.comment-leave-to {
  opacity: 0;
  transform: translateY(-50%);
}

/* 移动动画 */
.comment-move {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-content {
  background-color: hsla(0, 0%, 100%, 0.9);
  padding: 0 15px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 10px;
  text-overflow: ellipsis;
  color: #333;
}

.comment-content::-webkit-scrollbar {
  display: none;
}
</style>
